<!DOCTYPE html>
<html>
  <head>
    <meta name="layout" content="main">   
  </head>
  <body >
  	<div id="map-canvas" style="display: none;" ></div>
    <div>
      <div class="pagewrapper" style="position: relative;;font-family: wf_SegoeUI,Tahoma,Verdana,Arial,sans-serif;background-color: white;">
		<img src="${resource(dir: 'images', file: 'add_list.png')}" style="height:40px;z-index:20;top:10px;position:absolute;left:8%;">
		<a class="a-add-place-nhieu" style="height:40px;width:50% ;z-index:20;text-decoration: none;cursor:default;font-size: 250%;font-weight: bold;left:0%">ADD PLACE</a>
		<div class="div-add-place-nhieu" style="">
			<div  id="app-bt-tab1-o" class="div-open-add-place-nhieu" style="left:5%;display:none;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 1:Basic Information</a>
			</div>
			<div id="app-bt-tab1-c" class="div-close-add-place-nhieu" style="left:5%;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 1:Basic Information</a>
			</div>
			
			<div id="app-bt-tab2-o" class="div-open-add-place-nhieu" style="left:23.2%;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 2:Feature</a>
			</div>
			<div id="app-bt-tab2-c" class="div-close-add-place-nhieu" style="left:23.2%;display:none;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 2:Feature</a>
			</div>
			<div id="app-bt-tab3-o" class="div-open-add-place-nhieu" style="left:41.4%;width: 20%;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 3:Image and Contact</a>
			</div>
			<div id="app-bt-tab3-c" class="div-close-add-place-nhieu" style="left:41.4%;width: 20%;display:none;">
				<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;" >STEP 3:Image and Contact</a>
			</div>
		</div>
		<input type="text" id="request" value="${a }" style="display:none">
		
		<g:uploadForm action="doAddPlace">
		<div id="app-taber1" class="taber-add-place-nhieu" style=" ">			  <%-- Tab 1 --%>
				<div style="width:80%; height:430px;position:absolute;z-index:10;top:30px;left:15%;">
					<div class="div-row-add-place2" style="top:10px;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Address * :</a>
						<input type="text" name="tfaddress" id="address" class="tf-add-place" style="">
					</div>
					<div class="div-row-add-place2" style="top:56px;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">City * :</a>
						<div class="tf-add-place" style="width: 50.44%">
						
						<select class="cbb-add-place" id="cbbcity" name="cbbcity"  style="" onchange="getcity();">
							<option style="">---Choose One---</option>
							<g:each in="${citys}" var="city">
								<option id="test">${city.cityName }</option>
							</g:each>
						</select>
						</div>
					</div>
					
					<div class="div-row-add-place2" style="top:102px;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">District * :</a>
						<div class="tf-add-place" style="width: 50.44%">
							<select class="cbb-add-place" id="cbbdt" name="cbbdt" style="">
								<option>---Choose One---</option>	
							</select>
						</div>
					</div>
					<div class="div-row-add-place2" style="top:148px;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Price * :</a>
						<input type="text" name="tfprice" id="tfprice" class="tf-add-place" style="">
					</div>
					<div class="div-row-add-place2" style="top:194px;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Buy or Rent * :</a>
						<div class="tf-add-place" style="width: 50.44%">
						<select class="cbb-add-place" id="cbbbr" name="cbbbr" style="">
							<option style="">---Choose One---</option>
							<option>Buy</option>
							<option>Rent</option>
						</select>
					</div>
				</div>
				
				<div class="div-row-add-place2" style="top:240px;">
					<a class="label-add-place" style="text-decoration: none;cursor:default;">Description * :</a>
					<textarea rows="4" cols="29" name="tadescrip" class="tf-add-place style-scrollbar" id="tf-add-place" style="height: 80px;width: 46.5%;"></textarea>
					<input type="text" name="lat" id="tf-lat" style="display:none">
					<input type="text" name="lng" id="tf-lng" style="display:none">
				</div>
				<div class="div-open-add-place-nhieu" id="app-bt-next1" style="height:30px;width:8%; top: 370px;left:70% ;background-color: #00A4D3">
					<a class="a-add-place-nhieu"  style="text-decoration: none;cursor:default;top: 7px;color: white;" >Next Step</a>
				</div>
				<div class="div-open-add-place-nhieu" id="app-bt-return" style="height:30px;width:15%; top: 370px;left:53% ;background-color: #00A4D3">
					<a href="http://localhost:8080/Lemon/" class="a-add-place-nhieu" style="text-decoration: none;cursor:default;top: 7px;color: white;width: " >Return to Main Page</a>
				</div>
				
			</div>
		</div>
		
		<div id="app-taber2" class="taber-add-place-nhieu" style="display:none; ">
			<div style="width:80%; height:430px;position:absolute;z-index:10;top:30px;left:5%;">
				<div class="div-row-add-place2" style="top:10px;">
					<a class="label-add-place" style="text-decoration: none;cursor:default;">Type * :</a>
					<div class="tf-add-place" style="width: 50.44%">
						<select class="cbb-add-place" name="cbbtype" style="">
							<option>---Choose One---</option>
							<option>house</option>
							<option>apartment</option>
							<option>apartment building</option>
							<option>villa</option>
							<option>condominium</option>
						</select>
					</div>
				</div>
				<div class="div-row-add-place2" style="top:10px;left: 60%;width: 50%">
					<a class="label-add-place" style="left:10%;text-decoration: none;cursor:default;">Avatar:</a>
					<input type="file" name="image" class="tf-add-place"  style="width: 40%; background-color: #C4C4C4;top:3px;">
				</div>
				<div class="div-row-add-place2" style="top:56px;">
					<a class="label-add-place" style="text-decoration: none;cursor:default;">Bed Room * :</a>
					<input type="text" name="tfbedroom" class="tf-add-place" style="">
				</div>
				<div class="div-row-add-place2" style="top:102px;">
					<a class="label-add-place" style="text-decoration: none;cursor:default;">Bath Room * :</a>
					<input type="text" name="tfbathroom" class="tf-add-place" style="">
				</div>
				<div class="div-row-add-place2" style="top:148px;">
					<a class="label-add-place" style="text-decoration: none;cursor:default;">More Feature:</a>
					<div class="tf-add-place" style="height: 200px">
						<div class="div-row-add-place" style="top:0px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Air Condition:</a>
							<input type="checkbox" value="air" name="air" class="tf-add-place" style="top: 12px;">
						</div>
						<div class="div-row-add-place" style="top:35px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Celling:</a>
							<input type="checkbox" value="celling" name="celling" class="tf-add-place" style="top: 12px;">
						</div>
						<div class="div-row-add-place" style="top:70px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Elevator:</a>
							<input type="checkbox" value="elevator" name="elevator" class="tf-add-place" style="top: 12px;">
						</div>
						<div class="div-row-add-place" style="top:105px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Laundry:</a>
							<input type="checkbox" value="laundry" name="laundry" class="tf-add-place" style="top: 12px;">
						</div>
						<div class="div-row-add-place" style="top:140px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Parking:</a>
							<input type="checkbox" value="parking" name="parking" class="tf-add-place" style="top: 12px;">
						</div>
						<div class="div-row-add-place" style="top:175px;">
							<a class="label-add-place" style="text-decoration: none;cursor:default;">Garare:</a>
							<input type="checkbox" value="garage" name="garare" class="tf-add-place" style="top: 12px;">
						</div>
					</div>
				</div>
				<div class="div-open-add-place-nhieu" id="app-bt-next2" style="height:30px;width:8%; top: 370px;left:80% ;background-color: #00A4D3;">
					<a class="a-add-place-nhieu"  style="text-decoration: none;cursor:default;top: 7px;color: white" >Next</a>
				</div>
				<div class="div-open-add-place-nhieu" id="app-bt-back2" style="height:30px;width:8%; top: 370px;left:69% ;background-color: #00A4D3">
					<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;top: 7px;color: white" >Back</a>
				</div>
			</div>
		</div>
		<div id="app-taber3" class="taber-add-place-nhieu" style="display:none; ">
			<div style="width:60%; height:200px;position:absolute;z-index:10;top:30px;left:10%;">
				<div class="div-row-add-place2" style="top:20px;width: 80%;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Name Contact:</a>
						<input type="text" name="tfnamect" class="tf-add-place" style="left:40%;">
				</div>
				<div class="div-row-add-place2" style="top:80px;width: 80%;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Email Contact:</a>
						<input type="text" name="tfemailct" class="tf-add-place" style="left:40%;">
				</div>
				<div class="div-row-add-place2" style="top:140px;width: 80%;">
						<a class="label-add-place" style="text-decoration: none;cursor:default;">Phone Contact:</a>
						<input type="text" name="tfphonect" class="tf-add-place" style="left:40%;">
				</div>
			</div>
			<div style="width:80%; height:200px;position:absolute;z-index:10;top:230px;left:10%;">
				<a class="label-add-place" style="left:3.5%;top:15px;text-decoration: none;cursor:default;">Image</a>	
			 	<input name="files1" class="tf-add-place" type="file" style="width: 30%; background-color: #C4C4C4;top:20px;left: 28%;" />
				<input name="files2" class="tf-add-place" type="file" style="width: 30%; background-color: #C4C4C4;top:80px;left: 28%;" />
				<input name="files3" class="tf-add-place" type="file" style="width: 30%; background-color: #C4C4C4;top:140px;left: 28%;" />
				<input type="button" value="Finish" id="btfinish" style="height:30px;width:10%; top: 170px;left:74% ;background-color: #00A4D3;z-index:10;position:absolute;" >
				<div class="div-open-add-place-nhieu" id="app-bt-back3" style="height:30px;width:8%; top: 170px;left:62% ;background-color: #00A4D3">
					<a class="a-add-place-nhieu" style="text-decoration: none;cursor:default;top: 7px;color: white" >Back</a>
				</div>
			</div>
			<div id="div-alert" style="width:100%; height:100%;position:absolute;z-index:40;top:0px;left:0%;background-color: rgba(0,0,0,0.4);display:none;">
				<div style="width:38%; height:170px;position:absolute;z-index:50;top:50px;left:35%;background-color: white;">
					<a class="label-add-place" style="left:3.5%;top:10px;text-decoration: none;cursor:default;font-size: 150%;">Do you want to finish add place proccess</a>
					<a class="label-add-place" style="left:7%;top:70px;text-decoration: none;cursor:default;font-size: 100%;">Click "Yes"to finish</a>
					<a class="label-add-place" style="left:7%;top:90px;text-decoration: none;cursor:default;font-size:100%;">Click "No"to type again</a>
					<input type="submit" value="Yes" style="height:25px;width:17%; top: 130px;left:60% ;background-color: #00A4D3;z-index:10;position:absolute;">
					<input type="button" value="No" id="btno" style="height:25px;width:17%; top: 130px;left:80% ;background-color: #00A4D3;z-index:10;position:absolute;">
				</div>
			</div>
			<div id="div-alert1" style="width:70%; height:100%;position:absolute;z-index:40;top:0px;left:0%;background-color: rgba(0,0,0,0.4);display:none;">
				<div id="div-canvas" style="width:30%; height:100px;position:absolute;z-index:50;top:100px;left:35%;background-color: white;">
					<a class="label-add-place" style="left:3.5%;top:10px;text-decoration: none;cursor:default;font-size: 120%;">Information is not true, adding place is not success</a>
					<input type="Button" value="Yes" style="height:25px;width:20%; top: 50px;left:40% ;background-color: #00A4D3;z-index:10;position:absolute;">
				</div>
			</div>
			<div id="div-alert2" style="width:70%; height:100%;position:absolute;z-index:40;top:0px;left:0%;background-color: rgba(0,0,0,0.4);display:none;">
				<div id="div-canvas" style="width:30%; height:100px;position:absolute;z-index:50;top:100px;left:35%;background-color: white;">
					<a class="label-add-place" style="left:3.5%;top:10px;text-decoration: none;cursor:default;font-size: 120%;">Adding place finished!!!! But you should add information about Feature, Contact!!! go to "My List Page" to view again</a>
					<input type="Button" value="Yes" style="height:25px;width:20%; top: 50px;left:40% ;background-color: #00A4D3;z-index:10;position:absolute;">
				</div>
			</div>
			<div id="div-alert3" style="width:70%; height:100%;position:absolute;z-index:40;top:0px;left:0%;background-color: rgba(0,0,0,0.4);display:none;">
				<div id="div-canvas" style="width:30%; height:100px;position:absolute;z-index:50;top:100px;left:35%;background-color: white;">
					<a class="label-add-place" style="left:3.5%;top:10px;text-decoration: none;cursor:default;font-size: 120%;">You finished, go to "My List Page" to view again</a>
					<input type="Button" value="Yes" style="height:25px;width:20%; top: 50px;left:40% ;background-color: #00A4D3;z-index:10;position:absolute;">
				</div>
			</div>
		</div>
	</g:uploadForm>
	</div>
    </div>
  </body>
</html>